/**
 * Created by jean.h.ma on 14/03/2018.
 */

import React from 'react'
import Base from '@codefree/badger/app/components/Base'
import SearchBox from './SearchBox'
import {toggleSlideMenu} from "../ar/state";
import {connect} from 'react-redux'

@connect(({state}) => ({
	showSlideMenu: state.showSlideMenu
}))
export default class Navigation extends Base {
	render() {
		return (
			<div className="pure-menu pure-menu-horizontal pure-menu-scrollable badger-navigation">
				<div className="pure-menu-heading logo">
					<a href="#" className="pure-menu-link ">Yahoo</a>
				</div>
				<div className="pure-menu-heading slide-menu-button">
					<a href="javascript:void(0)" onClick={() => {
						this.props.dispatch(toggleSlideMenu(!this.props.showSlideMenu));
					}}><i className={`fa ${this.props.showSlideMenu?"fa-arrow-circle-left":"fa-arrow-circle-right"}`}></i></a>
				</div>
				<div className="pure-menu-heading navigation-search-box">
					<SearchBox/>
				</div>
				<ul className="pure-menu-list">
					<li className="pure-menu-item"><a href="#" className="pure-menu-link"><i className="fa fa-bell"></i></a>
					</li>
					<li className="pure-menu-item"><a href="#" className="pure-menu-link">Flickr</a></li>
					<li className="pure-menu-item"><a href="#" className="pure-menu-link">Messenger</a></li>
					<li className="pure-menu-item"><a href="#" className="pure-menu-link">Sports</a></li>
					<li className="pure-menu-item"><a href="#" className="pure-menu-link">Finance</a></li>
					<li className="pure-menu-item"><a href="#" className="pure-menu-link">Autos</a></li>
				</ul>
			</div>
		);
	}
}